<template>
  <div
      ref="container"
      class="monaco-editor"
      :style="`height: ${height}px;;width:500px;`"
  ></div>
</template>
<script>

export default {
  name: 'jsonDiff',
  props: {
    opts: {
      type: Object,
      default() {
        return {}
      }
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      // 主要配置
      defaultOpts: {
        value: '', // 编辑器的值
        theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
        roundedSelection: true, // 右侧不显示编辑器预览框
        autoIndent: true // 自动缩进
      },
      // 编辑器对象
      monacoEditor: {}
    }
  },
  watch: {
    opts: {
      handler() {
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$refs.container.innerHTML = ''
      // 生成编辑器配置
      let editorOptions = Object.assign(this.defaultOpts, this.opts)
      editorOptions.readOnly = true;
      editorOptions.language = 'json'
      // 初始化编辑器实例
      this.monacoDiffInstance = monaco.editor.createDiffEditor(this.$refs['container'], editorOptions)
      this.monacoDiffInstance.setModel({
        // oldValue为以前的值
        original: monaco.editor.createModel(this.oldValue, editorOptions.language),
        // oldValue为新的值
        modified: monaco.editor.createModel(this.newValue, editorOptions.language)
      })
    },
    // 供父组件调用手动获取值
    getVal() {
      return this.monacoEditor.getValue()
    }
  }
}
</script>